<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <a href="Demo2-addBrand.html"><input type="button" value="新增"> </a><br>
        <hr>
        <table id="brandTable" border="1" cellspacing="0" width="90%" align="center">
            <tr>
                <th>序号</th>
                <th>品牌名称</th>
                <th>企业名称</th>
                <th>排序权重</th>
                <th>状态</th>
                <th>品牌介绍</th>
                <th>操作</th>
            </tr>
            <tr v-for="(brand, i) in brands" align="center">
                <td>{{i+1}}</td>
                <td>{{brand.brandName}}</td>
                <td>{{brand.companyName}}</td>
                <td>{{brand.ordered}}</td>
                <td>{{brand.status}}</td>
                <td>{{brand.description}}</td>
                <td>
                    <a href="#" >修改</a>
                    <a href="#" >删除</a>
                </td>
            </tr>
        </table>
    </div>

</body>
    <script>
        new Vue({
            el:"#app",
            data:function () {
                return {
                    brands:[]
                }
            },
            mounted:function () {
                var _this = this;
                axios({
                    method:"post",
                    url:"http://localhost:8080/BigHomeworkProject/selectAllBrandsServlet"
                }).then(resp => {
                    _this.brands = resp.data;
                })
            }
        });
    </script>
</html>